<template>
	<view class="">
		<view class="result" v-if="Object.keys(data).length>0">
			<view class="title"> 为您提供以下爱脑健康建议 </view>
			<view class="line"> </view>
			<view class="content">
				<view class="text_content">
					<view class="">
						<view class="first">
							<view class="left">
								<u-avatar :src="tou" size="44" class="avatar"></u-avatar>
							</view>
							<view class="right">
								<view class="right_first_line">
									<!-- 名称 -->
									<view class="name">
										{{ data.name }}
									</view>
									<!-- 教育 -->
									<view class="education">
										<!-- 教育年限：{{ data.eduTotal }}年 -->
									</view>
								</view>
								<!--  -->
								<view class="right_two_line">
									<view class="education">
										{{ data.gender }} {{ data.age }}
									</view>
									<view class="education">
										{{ data.reportDate }}
									</view>
								</view>
							</view>
						</view>

						<view class="test_number">
							<view class="education"> 编号：{{ data.reportNo }} </view>
							<view class="education">
								<!-- 主试人：{{ data.doctorName }} -->
							</view>
						</view>
					</view>

					<u-line dashed></u-line>
					<view class="header_title" @click="doctorAdvice">
						<img src="./img/first.png" alt="" style="" />
						<text style="" class="text">医疗就诊建议</text><text style="color: #0ace70;">点击查看</text>
					</view>
					<view class="zhushi" @click="doctorAdvice">
						<u-parse :content="content"></u-parse>
					</view>

					<u-line dashed></u-line>
					<view class="header_title" @click="trainingAdvice">
						<img src="./img/secend.png" alt="" style="" />
						<text style="" class="text">专项训练建议</text><text style="color: #0ace70;">点击查看</text>
					</view>
					<view class="zhushi" @click="trainingAdvice">
						<u-parse :content="content2"></u-parse>
					</view>

					<u-line dashed></u-line>
					<view class="header_title" @click="sportAdvice">
						<img src="./img/third.png" alt="" style="" />
						<text style="" class="text">运动康养建议</text><text style="color: #0ace70;">点击查看</text>
					</view>
					<view class="zhushi" @click="sportAdvice">
						<u-parse :content="content3"></u-parse>
					</view>

					<u-line dashed></u-line>
					<view class="header_title" @click="sleepAdvice">
						<img src="./img/four.png" alt="" style="" />
						<text style="" class="text">睡眠调整建议</text><text style="color: #0ace70;">点击查看</text>
					</view>
					<view class="zhushi" @click="sleepAdvice">
						<u-parse :content="content4"></u-parse>
					</view>

					<u-line dashed></u-line>
					<view class="header_title" @click="hearthAdivce">
						<img src="./img/five.png" alt="" style="" />
						<text style="" class="text">营养膳食建议</text><text style="color: #0ace70;">点击查看</text>
					</view>
					<view class="zhushi" @click="hearthAdivce">
						<u-parse :content="content5"></u-parse>
					</view>
				</view>
			</view>
			<view class="btns">
				<view class="left_btn" @click="genraterImage">
					生成图片保存
				</view>
				<view class="right_btn" @click="handleBackHome">
					返回首页
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from "vuex";
	import res from "./res.json";
	import {
		getReport
	} from '@/api/api.js'
	export default {
		data() {
			return {
				data: {},
				content: `当出现认知障碍症状时，建议您及时前往“记忆门诊”专病科室、神经内科或老年病科室就医，完成详细脑健康检查，并进行针对性治疗。<br/><br/>
                 目前，认知障碍患者主要采取药物治疗和认知训练治疗，疾病发现越早，疗效越好。认知训练即通过医院终端机、手机移动端训练认知方面的典型题目，患者症状往往得以缓解，效果良好。<br/><br/>`,
				content2: `北京师范大学认知神经科学与学习国家重点实验室基于十余年的科研成果，利用认知康复训练技术，自主研发覆盖记忆力、注意力、感知觉、执行功能、加工速度、语言能力、逻辑推理等7大认知领域的认知训练体系。
<br/><br/>可基于您的认知障碍筛查报告，制定专属训练方案，有效加强主要脑功能的提升，促进大脑的健康运作。<text style="font-weight: bold;color: #0ace70">
您可定期前往合作医院进行处方化训练，也可通过手机进行碎片化和便捷性的训练。
</text><br/><br/>`,
				content3: `日常脑健康保养建议您多做康养运动，如专业的手指操、手指及全身有氧运动操等，可有效缓解神经紧张，改善大脑血液循环和神经功能。还可在日常生活中多进行一些散步、骑行、慢跑等有氧运动。<br/><br/>`,
				content4: `老年人<text style="font-weight: bold;color: #0ace70">睡眠质量差极易导致认知障碍</text>，甚至不同类型的痴呆。好的睡眠不仅能防止老年人过度疲劳，还能保护大脑皮质的细胞，使其免于衰竭或破坏，同时又是精神和体力得到恢复的最好方法。<br/><br/>`,
				content5: `良好的营养和平衡的膳食对于老年人来说非常重要，尤其是有一定认知障碍的老年人更加重要，合理的营养膳食应当适当限制热量摄入，营养物质要丰富，尤其是蛋白质要充足，蛋白质缺乏会增加脑卒中发生率，对脑功能危害极大。除此之外，还要保持
				<text style="font-weight: bold;color: #0ace70">
				摄入足量的维生素B12和维生素E
				</text>，可有效预防老年痴呆。<br/><br/>`
			};
		},
		computed: {
			...mapState({
				token: (state) => state.token,
				avatar: (state) => state.userInfo.avatarUrl,
				nickName: (state) => state.userInfo.nickName,
			}),
			tou() {
				return this.avatar ?
					this.avatar :
					"https://www.ainaoxingdong.com/api/an-media/images/an/static/personal/morenAv.png";
			},
		},
		methods: {
			genraterImage() {
				// 跳转到webview 加载图片生成网页
				const url = `https://www.ainaoxingdong.com/html_img/index.html#/?query=${JSON.stringify({
					token:this.token,
					avatar:this.avatar,
					type:'1',
				})}`

				// const url = `http://localhost:8080/#/?query=${JSON.stringify({
				// 	token:this.token,
				// 	avatar:this.avatar,
				// 	type:'1',
				// })}`
				uni.navigateTo({
					url: `/pages/middleScreening/webview/webview?url=${encodeURIComponent(url)}`,
				});
			},
			handleBackHome() {
				uni.switchTab({
					url: "/pages/index/index",
				});
			},
			doctorAdvice() {
				var url =
					"https://mp.weixin.qq.com/s?__biz=MzkyNjQyMzAwMQ==&mid=2247484054&idx=1&sn=dc1fa28e4f7006292e1d0e3ec6b8745d&chksm=c236c020f5414936bc0b294b3803beda8a2ead29557c0e5747348924a7cd4c27667956b404dd#rd";
				uni.navigateTo({
					url: `/pages/middleScreening/healthAdvice/publicArticle?url=${encodeURIComponent(url)}`
				})
			},
			sleepAdvice() {
				uni.navigateTo({
					url: `/pages/middleScreening/healthAdvice/sleepAdviceSwper`
				})
			},
			hearthAdivce() {
				uni.navigateTo({
					url: `/pages/middleScreening/healthAdvice/hearthAdviceSwper`
				})
			},
			trainingAdvice() {
				uni.navigateTo({
					url: `/pages/middleScreening/healthAdvice/trainingAdviceList`
				})
			},
			sportAdvice() {
				uni.navigateTo({
					url: `/pages/middleScreening/healthAdvice/sportAdviceList`
				})
			},
			report(params = {}) {
				getReport(params).then(res => {
					console.log(res)
					const {
						data
					} = res
					this.data = data.data || {}
					// this.data = {}
					console.log(data)
				})
			}
		},
		mounted() {
			// console.log(res, "resresresresresresres");
			// const data = res.data;
			// this.data = data.data;
		},
		onLoad() {
			this.report()
			uni.$u.mpShare = {
				title: "爱脑行动", // 默认为小程序名称，可自定义
				path: "/pages/index/index", // 默认为当前页面路径，一般无需修改，QQ小程序不支持
				// 分享图标，路径可以是本地文件路径、代码包文件路径或者网络图片路径。
				// 支持PNG及JPG，默认为当前页面的截图
				imageUrl: "/static/logo.png",
			};
		},
	};
</script>

<style lang="scss">
	.btns {
		display: flex;
		justify-content: space-between;
		margin: 0 40rpx;
		margin-top: 60rpx;
		padding-bottom: 40rpx;

		.left_btn {
			width: 320rpx;
			height: 96rpx;
			background: #66FFB5;
			box-shadow: 4px 6px 18px 0px rgba(31, 90, 102, 0.1);
			border-radius: 20rpx;
			line-height: 96rpx;
			text-align: center;
			font-weight: 550;
			color: #003941;

			font-size: 32rpx;
		}

		.right_btn {
			width: 320rpx;
			height: 96rpx;
			background: #004751;
			box-shadow: 4px 6px 18px 0px rgba(31, 90, 102, 0.1);
			border-radius: 20rpx;
			line-height: 96rpx;
			text-align: center;
			font-weight: 550;
			color: #66FFB5;

			font-size: 32rpx;
		}
	}

	.zhushi_hui {
		width: 305px;
		height: 33px;
		font-size: 10px;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #a1b0b3;
		line-height: 14px;
	}

	.header_title {
		margin: 30rpx 0;

		img {
			width: 32rpx;
			height: 32rpx;
			position: relative;
			top: 5rpx;
		}

		.text {
			height: 48rpx;
			font-size: 40rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: bold;
			color: #003941;
			line-height: 48rpx;
			margin-left: 10rpx;
		}
	}


	.zhushi {
		font-size: 34rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #336c74;
		line-height: 48rpx;
	}

	.result {
		background: linear-gradient(180deg, #00cc6a 0%, #d8feeb 30%);
		width: 100%;
		position: relative;

		.title {
			// width: 180px;
			// height: 30px;
			font-size: 20px;
			font-family: FZLTDHJW--GB1-0, FZLTDHJW--GB1;
			font-weight: normal;
			color: #ffffff;
			line-height: 30px;
			padding-left: 70rpx;
			padding-top: 40rpx;
			font-weight: 550;
		}

		.line {
			width: 690rpx;
			height: 20rpx;
			background: #336c74;
			border-radius: 20rpx;
			margin: auto;
			margin-top: 20rpx;
			z-index: 1;
			position: relative;
			opacity: 0.5;
			bottom: -10rpx;
		}

		.content {
			width: 670rpx;
			background: #ffffff;
			box-shadow: 0px 6px 16px 0px rgba(75, 126, 139, 0.1);
			margin: auto;
			z-index: 44;
			position: relative;
			opacity: 1;
			border-radius: 10rpx 10rpx 10rpx 10rpx;

			.text_content {
				padding: 40rpx 30rpx;

				.education {
					height: 34rpx;
					font-size: 24rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #336c74;
					line-height: 34rpx;
				}

				.first {
					display: flex;

					.left {
						width: 88rpx;
						height: 88rpx;
					}

					.right {
						flex: 1;
						padding-left: 30rpx;

						.right_first_line {
							display: flex;
							width: 100%;
							justify-content: space-between;

							.name {
								height: 48rpx;
								font-size: 32rpx;
								font-family: PingFangSC-Medium, PingFang SC;
								font-weight: 550;
								color: #003941;
								line-height: 48rpx;
							}

							.education {
								line-height: 48rpx;
							}
						}

						.right_two_line {
							display: flex;
							width: 100%;
							justify-content: space-between;
						}
					}
				}

				.test_number {
					display: flex;
					width: 100%;
					justify-content: space-between;
					margin-top: 40rpx;
					margin-bottom: 30rpx;
				}
			}
		}
	}
</style>
